<template>
  <el-container>
    <el-header>
      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack()">返回</el-button>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="收款卡号">
          <el-input v-model="transform.othername" placeholder="请输入收款卡号"></el-input>
        </el-form-item>
        <el-form-item label="付款卡号">
          <el-input v-model="transform.accountname" placeholder="请输入付款卡号"></el-input>
        </el-form-item>
        <el-form-item label="转账金额">
          <el-input v-model="transform.money" placeholder="请输入转账金额"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="passwordDialogVisible=true">确认支付</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <el-dialog v-model="passwordDialogVisible" title="请输入密码">
      <el-input v-model="transform.password" placeholder="请输入密码"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPayment()">确定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElDialog } from 'element-plus';
import { transrecipient } from '../utils/requestApi.js'

const transform = ref({
  othername: '',
  accountname: '',
  money: '',
  password: ''
});

const cards = ref([]);
const newRecipientCard = ref('');

const passwordDialogVisible = ref(false);

const goBack = () => {
  window.history.back();
};

const submitPayment =  async () =>{
	console.log(transform.value);
	transrecipient(transform.value).then(response =>{
		if (response.data.code === '200'){
				  ElMessage({
					  message:'转账成功',
					  type:'success'
				  });
		
		}else{
				ElMessage({
				  message: response.data.msg,
				  type: 'danger'
				});  
		}
	})
	.catch(err =>{
		  ElMessage({
		    message: err,
		    type: 'danger'
		  });
	});

};



</script>


<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
